<template>
  <div>
    <div class="banner" @click="handleBannerClick">
      <img class="banner-img" src="//img1.qunarzz.com/sight/p0/1409/19/adca619faaab0898245dc4ec482b5722.jpg_600x330_f922b488.jpg"/>
      <div class="banner-info">
        <div class="banner-title">故宫(AAAAA景区)</div>
        <div class="banner-number"><span class="iconfont banner-icon">&#xe62f;</span>8</div>
      </div>
    </div>
    <common-gallary
      :imgs="imgs"
      v-show="showGallary"
      @close="handleBannerClose"
    ></common-gallary>
  </div>
</template>

<script>
  import CommonGallary from "../../../common/gallary/Gallary";
    export
    default {
        name: "DetailBanner",
      data(){
          return{
            showGallary:false,
            imgs:['http://img1.qunarzz.com/wugc/p180/201306/16/7f08e81624346b1693835fbb.jpg_350x240_b09a9503.jpg',
              '//img1.qunarzz.com/sight/p0/1409/19/adca619faaab0898245dc4ec482b5722.jpg_600x330_f922b488.jpg']
          }

      },
      methods:{
        handleBannerClick(){
          this.showGallary=true
        },
        handleBannerClose(){
          this.showGallary=false
        }
      },
      components: {CommonGallary},
      CommonGallary
    }
</script>

<style lang="stylus" scoped>
  @import "'~styles/mixins.styl"
  .banner
    position relative
    overflow hidden
    height 0
    padding-bottom 55%
  .banner-img{
    width 100%
  }
  .banner-info{
    display flex
    position  absolute
    left  0
    right 0
    bottom 0
    line-height .6rem
    color #ffffff
    background-image: linear-gradient(top, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.8))
  }
  .banner-title{
    flex 1
    font-size .32rem
    padding 0.2rem
  }
  .banner-number{
    height: .32rem
    line-height: .32rem
    margin-top: .24rem
    padding: 0 .4rem
    border-radius: .2rem
    background: rgba(0, 0, 0, .8)
    font-size .24rem
  }
  .banner-icon{

    font-size .24rem
  }
</style>
